<template>
  <div class="m-25 mt-65 agora">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>考核任务</h2>
        </div>
      </div>

      <!-- 搜索 -->
      <Card style="margin-bottom: 10px;">
        <div class="normal-list-page-hd clearfix">
            <Button custom-icon="iconfont icon-fangkuai2" type="primary" size="small" style="float:right"  @click="creata">新建任务</Button>
            <Input class="mr-10" v-model="queryData.taskName" placeholder="任务名称" :clearable=true style="width: 200px"/>
            <Select class="mr-10" v-model="queryData.taskStatus" style="width:150px;" :clearable=true placeholder="任务状态">
                <Option value="1">待接受</Option>
                <Option value="2">已接受</Option>
                <Option value="3">已完成</Option>
            </Select>
            <Button class="mr-10" type="primary" custom-icon="iconfont icon-chaxun" size="small" @click="getTableData">查找</Button>
        </div>
        </Card>

      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <div class="normal-list-page-bd">
            <Table
              border
              :columns="list.columns"
              :data="list.tableData"
            ></Table>
          </div>
          <div class="row-b">
            <Page
              :total="queryData.totalRecord"
              :page-size="queryData.limit"
              :current="queryData.page"
              show-total
              show-elevator
              @on-change="changePage"
            ></Page>
          </div>
        </div>
      </div>

      <!--新建/修改用户-->
        <Modal v-model="creaUp.modal1" :title="creaUp.title" :loading="creaUp.loading" @on-ok="sendPost">
          <Form ref="check" :model="creaUp.data" :label-width="80" :rules="creaUp.rules">
            <FormItem label="任务名称" prop="taskName">
              <Input placeholder="请输入" v-model="creaUp.data.taskName" :disabled='disabled' style="width:300px;"/>
            </FormItem>
            <FormItem label="任务说明" prop="taskDescription">
              <Input placeholder="请输入" v-model="creaUp.data.taskDescription" :disabled='disabled' style="width:300px;"/>
            </FormItem>
            <FormItem label="任务类型" prop="taskType">
              <Input placeholder="请输入" v-model="creaUp.data.taskType" :disabled='disabled' style="width:300px;"/>
            </FormItem>
            <FormItem label="小区" prop="taskCommunity">
              <Input placeholder="请输入" v-model="creaUp.data.taskCommunity" :disabled='disabled' style="width:300px;"/>
            </FormItem>
            <FormItem label="内容编号" prop="standardId">
              <Select v-model="creaUp.data.standardId" style="width:300px">
                  <Option v-for="item of sele" :key="item" :value="item">{{item}}</Option>
              </Select>
            </FormItem>
            <FormItem label="选定场景" prop="taskScenes">
              <Select v-model="creaUp.data.taskScenes" style="width:300px">
                  <Option value="1">指定选择</Option>
                  <Option value="2">随机选择</Option>
              </Select>
            </FormItem>
            <FormItem label="考核流程" prop="taskProcess">
              <Select v-model="creaUp.data.taskProcess" style="width:300px">
                  <Option value="1">监督考核</Option>
                  <Option value="2">自检考核</Option>
                  <Option value="3">考核复查</Option>
              </Select>
            </FormItem>
            <FormItem label="检查人员" prop="inspectors">
              <Input placeholder="请输入" v-model="creaUp.data.inspectors" :disabled='disabled' style="width:300px;"/>
            </FormItem>
            <FormItem label="* 截止时间" prop="endTime">
              <DatePicker v-model="creaUp.data.endTime" :value="creaUp.data.endTime" type="datetime" placeholder="Select date and time" style="width: 200px"></DatePicker>
            </FormItem>
            <FormItem label="任务状态" prop="taskStatus">
              <Select v-model="creaUp.data.taskStatus" style="width:300px">
                  <Option value="1">待接受</Option>
                  <Option value="2">已接受</Option>
                  <Option value="3">已完成</Option>
              </Select>
            </FormItem>
          </Form>
        </Modal>
    </div>
  </div>
</template>
<script>
import gcDispenserApi from '@/api/base_sys/gcDispenser.js'
import { Message } from 'iview'

export default {
  data () {
    return {
      url: '/api/voTask/',

      list: {
        selections: [],
        // 列表展示数据
        tableData: [],
        columns: [
          {
            title: '序号',
            key: 'id',
            align: 'center',
            minWidth: 10
          },
          {
            title: '任务名称',
            key: 'taskName',
            align: 'center',
            minWidth: 100
          },
          {
            title: '任务说明',
            key: 'taskDescription',
            align: 'center',
            minWidth: 250,
            render: (h, params) => {
              return h('div', [
                h('span', {
                  style: {
                    display: 'inline-block',
                    width: '100%',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap'
                  },
                  domProps: {
                    title: params.row.taskDescription
                  }
                }, params.row.taskDescription)
              ])
            }
          },
          {
            title: '任务类型',
            key: 'taskType',
            align: 'center',
            minWidth: 50
          },
          {
            title: '选定场景',
            // key: "taskScenes",
            align: 'center',
            minWidth: 50,
            render: (h, p) => {
              let a = p.row.taskScenes
              let r
              switch (a) {
                case 1:r = '指定选择'; break
                case 2:r = '随机选择'; break
                default: r = a; break
              }
              return h('div', r)
            }
          },
          {
            title: '小区',
            key: 'taskCommunity',
            align: 'center',
            minWidth: 50
          },
          {
            title: '内容编号',
            key: 'standardId',
            align: 'center',
            minWidth: 50
          },
          {
            title: '考核流程',
            align: 'center',
            minWidth: 50,
            render: (h, p) => {
              let a = p.row.taskProcess
              let r
              switch (a) {
                case 1:r = '监督考核'; break
                case 2:r = '自检考核'; break
                case 3:r = '考核复查'; break
                default: r = a; break
              }
              return h('div', r)
            }
          },
          {
            title: '检查人员',
            key: 'inspectors',
            align: 'center',
            minWidth: 50
          },
          {
            title: '截止时间',
            // key: "endTime",
            align: 'center',
            minWidth: 100,
            render: (h, p) => {
              let r = (p.row.endTime).slice(0, 19)
              return h('div', r)
            }
          },
          {
            title: '任务状态',
            align: 'center',
            minWidth: 50,
            render: (h, p) => {
              let a = p.row.taskStatus
              let r, color
              switch (a) {
                case 1:r = '待接受'; color = 'warning'; break
                case 2:r = '已接受'; color = 'primary'; break
                case 3:r = '已完成'; color = 'default'; break
                default: r = a; break
              }
              return h('Tag', { props: { color: color } }, r)
            }
          },
          {
            title: '操作',
            align: 'center',
            minWidth: 80,
            render: (h, p) => {
              return h('div', [
                h('i-button', {
                  props: { type: 'default', size: 'small' },
                  style: { margin: '0 3px' },
                  on: {
                    click: () => { this.updata(p.row.id) }
                  }
                }, '编辑'),
                h('i-button', {
                  props: { type: 'error', size: 'small' },
                  style: { margin: '0 3px' },
                  on: {
                    click: () => { this.dele(p.row.id) }
                  }
                }, '删除')
              ])
            }
          }
        ]
      },

      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        taskName: '', // 任务名称
        taskStatus: '' // 任务状态
      },
      sele: [],
      upid: '',
      creaUp: {
        med: '',
        modal1: false,
        loading: false,
        title: '',
        data: {
          // id: '',
          taskName: '', // 任务名称
          taskDescription: '', // 任务说明
          taskType: '', // 任务类型
          taskScenes: '', // 选定场景
          taskProcess: '', // 考核流程
          inspectors: '', // 检查人员
          endTime: '', // 截止时间
          taskStatus: '', // 任务状态
          taskCommunity: '', // 小区
          standardId: '' // 内容编号
        },
        rules: { // check
          taskName: [{ required: true, message: '请填写任务名称', trigger: 'blur' }],
          taskDescription: [{ required: true, message: '请填写任务说明', trigger: 'blur' }],
          taskType: [{ required: true, message: '请填写任务类型', trigger: 'blur' }],
          taskScenes: [{ required: true, message: '请填写选定场景', trigger: 'blur' }],
          taskProcess: [{ required: true, message: '请填写考核流程', trigger: 'blur' }],
          inspectors: [{ required: true, message: '请填写检查人员', trigger: 'blur' }],
          //   endTime: [{message: "请填写截止时间",trigger: "blur"}],
          taskStatus: [{ required: true, message: '请填写任务状态', trigger: 'blur' }],
          standardId: [{ required: true, message: '请填写内容编号', trigger: 'blur' }],
          taskCommunity: [{ required: true, message: '请填写小区', trigger: 'blur' }]
        }
      }
    }
  },
  created () {
    this.getTableData()
  },
  watch: {
    'creaUp.modal1': function (n, o) {
      console.log(n, o)
    }
  },
  methods: {
    // 获取列表
    async getTableData () {
      console.log(this.queryData)
      this.queryData.totalRecord = undefined
      let result = (await gcDispenserApi.getData(this.url + 'page', this.queryData)).data
      console.log('result:', result)
      this.list.tableData = result.list
      this.queryData.totalRecord = result.totalRecord
      this.queryData.limit = result.pageSize
    },
    // 分页切换
    changePage (index) {
      this.queryData.page = index
      this.getTableData()
    },
    // 查询
    inQuire () {
      this.queryData.page = 1
      this.getTableData()
    },
    // 更新
    async updata (index) {
      let sele = (await gcDispenserApi.getData(this.url + 'all')).data
      this.sele = sele
      let c = this.creaUp
      c.modal1 = true
      c.med = 'up'
      c.title = '编辑任务'
      this.upid = index
      // c.data.id = index
      let r = (await gcDispenserApi.getData(this.url + index)).data
      c.data.taskName = r.taskName
      c.data.taskDescription = r.taskDescription
      c.data.taskType = r.taskType
      c.data.taskScenes = String(r.taskScenes)
      c.data.taskProcess = String(r.taskProcess)
      c.data.inspectors = r.inspectors
      c.data.endTime = r.endTime
      c.data.taskStatus = String(r.taskStatus)
      c.data.taskCommunity = r.taskCommunity
      c.data.standardId = String(r.standardId)
      console.log('up', r)
    },
    // 新建
    async creata () {
      let sele = (await gcDispenserApi.getData(this.url + 'all')).data
      this.sele = sele
      let c = this.creaUp
      c.med = 'cr'
      c.modal1 = true
      c.title = '新建任务'
      this.clear()
    },
    dele (index) {
      this.$Modal.confirm({
        title: "删除确认",
        content: "确定要删除本条任务吗？",
        loading: true,
        onOk: async ()=> {
          let result = await gcDispenserApi.del(this.url + index)
          if (result.data) {
            this.$Message.success('操作成功')
            console.log(result)
            this.getTableData()
            this.$Modal.remove();
          } else {
            console.log(result)
            this.$Message.error(result.message)
          }
        }
      })
      
    },
    all () {
      this.queryData.taskName = ''
      this.queryData.taskStatus = ''
      this.getTableData()
    },
    clear () {
      let c = this.creaUp
      c.data.taskName = ''
      c.data.taskDescription = ''
      c.data.taskType = ''
      c.data.taskScenes = ''
      c.data.taskProcess = ''
      c.data.inspectors = ''
      c.data.endTime = ''
      c.data.taskStatus = ''
      c.data.taskCommunity = ''
      c.data.standardId = ''
    },
    // 提交数据
    sendPost () {
      let c = this.creaUp
      console.log('提交')
      this.$refs['check'].validate(async valid => {
        if (!valid) {
          console.log('no')
          this.changeLoading()
        } else if (valid) {
          console.log(this.url, c.data)
          let data
          switch (c.med) {
            case 'up': data = await gcDispenserApi.update(this.url + this.upid, this.creaUp.data); break
            case 'cr': data = await gcDispenserApi.add(this.url, this.creaUp.data); break
            default: this.$Message.error('这种错误不可能出现'); break
          }
          let result = data.data
          let message = data.message
          if (result) {
            console.log('!!!')
            this.$Message.success('操作成功')
            console.log(result)
            this.getTableData()
            c.modal1 = false
          } else {
            console.log(result)
            this.$Message.error(message)
          }
        }
      })
    },
    // 改变load状态
    changeLoading () {
      this.creaUp.modal1 = false
      this.$nextTick(() => {
        this.creaUp.modal1 = true
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
